@use "scss/variables";

.connectorGrid {
  --grid-columns: 3;

  grid-column: 2 / 3;
  max-width: variables.$page-width;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-auto-rows: 68px;
  gap: variables.$spacing-xl;

  &__noMatches {
    grid-column: span var(--grid-columns);
    display: flex;
    flex-direction: column;
    gap: variables.$spacing-lg;
    padding: variables.$spacing-xl 0 variables.$spacing-2xl;
  }

  &__hiddenSearchResults {
    width: variables.$width-max-notification;
    margin-left: auto;
    margin-right: auto;
  }
}

@container (max-width: 800px) {
  .connectorGrid {
    --grid-columns: 2;
  }
}
